<template>
  <div id="demo">
  
    

   <div class="window" @mouseover="stop" @mouseleave="play">
      <ul class="container" :style="containerStyle">
        <li>
          <img :style="{width:imgWidth+'px'}" :src="sliders[sliders.length - 1].img" alt="">
        </li>
        <li  v-for="(item, index) in sliders" :key="index">
          <img :style="{width:imgWidth+'px'}" :src="item.img" alt="">
        </li>
        <li>
          <img :style="{width:imgWidth+'px'}" :src="sliders[0].img" alt="">
        </li>
      </ul>
      <ul class="direction">
        <li class="left" @click="move(1500, 1, speed)">
          <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"  /></svg>
        </li>
        <li class="right" @click="move(1500, -1, speed)">
          <svg class="icon" width="30px" height="30.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"  /></svg>
        </li>
      </ul>
      <ul class="dots">
        <li v-for="(dot, i) in sliders" :key="i"
        :class="{dotted: i === (currentIndex-1)}"
        @click = jump(i+1)
        >
        </li>
      </ul>
    </div>
    <div>

    </div>
    <div id="app">
    <el-container>
      <el-header>
        <p>疫情小助手</p>
      </el-header>
 
      <el-main>
        <!-- <router-link to="demo">跳转至demo页面</router-link> -->

        <el-button type="primary" @click="addRoutes1" class="iconfont"><i class="iconfont">&#xe606;核酸检测</i></el-button>
        <!-- <router-link to="./">返回至HelloWorld页面</router-link> -->
        <el-button type="info" @click="addRoutes2" class="iconfont"><i class="iconfont">&#xe60a;线上咨询</i></el-button>
        <el-button type="info" @click="addRoutes3" class="iconfont"><i class="iconfont">&#xe62c;预约挂号</i></el-button>
        <el-button type="info" @click="addRoutes4" class="iconfont"><i class="iconfont">&#xe7bc;AI助手</i></el-button>
      </el-main>
    </el-container>
  </div>


  </div>
 
</template>
<script>
// import { PageSizeChange } from "../components/NetWork/request";
// import moment from 'moment'
export default {
name:"demo",
  props: {
    initialSpeed: {
      type: Number,
      default: 30
    },
    initialInterval: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      sliders:[
        {
          img:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2985481655,3217965294&fm=26&gp=0.jpg'
        },
        {
          img:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3886091945,3304710348&fm=26&gp=0.jpg'
        },
        {
          img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3755284319,2351057336&fm=26&gp=0.jpg'
        },
        {
          img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1489648244,1297493166&fm=26&gp=0.jpg'
        },
       
      ],
      imgWidth:1500,
      currentIndex:1,
      distance:-1500,
      transitionEnd: true,
      speed: this.initialSpeed
    }
  },
  computed:{
    containerStyle() {
      return {
        transform:`translate3d(${this.distance}px, 0, 0)`
      }
    },
    interval() {
      return this.initialInterval * 1500
    }
  },
  mounted() {
    this.init()
  },
  methods:{
   
    init() {
      this.play()
      window.onblur = function() { this.stop() }.bind(this)
      window.onfocus = function() { this.play() }.bind(this)
        

    },
    move(offset, direction, speed) {
      console.log(speed)
      if (!this.transitionEnd) return
      this.transitionEnd = false
      direction === -1 ? this.currentIndex += offset/1500 : this.currentIndex -= offset/1500
      if (this.currentIndex > 5) this.currentIndex = 1
      if (this.currentIndex < 1) this.currentIndex = 5

      const destination = this.distance + offset * direction
      this.animate(destination, direction, speed)
    },
    animate(des, direc, speed) {
      if (this.temp) {
        window.clearInterval(this.temp);
        this.temp = null ;
      }
      this.temp = window.setInterval(() => {
        if ((direc === -1 && des < this.distance) || (direc === 1 && des > this.distance)) {
          this.distance += speed * direc
        } else {
          this.transitionEnd = true
          window.clearInterval(this.temp)
          this.distance = des
          if (des < -7500) this.distance = -1500
          if (des > -1500) this.distance = -7500
        }
      }, 20)
    },
    jump(index) {
      const direction = index - this.currentIndex >= 0 ? -1 : 1;
      const offset = Math.abs(index - this.currentIndex) * 1500;
      const jumpSpeed = Math.abs(index - this.currentIndex) === 0 ? this.speed : Math.abs(index - this.currentIndex) * this.speed ;
      this.move(offset, direction, jumpSpeed)
    },
    play() {
      if (this.timer) {
        window.clearInterval(this.timer)
        this.timer = null
      }
      this.timer = window.setInterval(() => {
        this.move(1500, -1, this.speed)
      }, this.interval)
    },
    stop() {
      window.clearInterval(this.timer)
      this.timer = null
    }
  }
};
</script>
<style lang="scss" scoped>

*{
        box-sizing: border-box;
        margin:0;
        padding:0;
      }
      ol,ul{
        list-style: none;
      }
      #slider{
        text-align: center;
      }
      .window{
        position:relative;
        width:1500px;
        height:500px;
        margin:0 auto;
        overflow:hidden;
      }
      .container{
        display:flex;
        position:absolute;
      }
      .left, .right{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:50px;
        height:50px;
        background-color:rgba(0,0,0,.3);
        border-radius:50%;
        cursor:pointer;
      }
      .left{
        left:4%;
        padding-left:12px;
        padding-top:10px;
      }
      .right{
        right:4%;
        padding-right:12px;
        padding-top:10px;
      }
      img{
        user-select: none;
        width:1500px
      }
      .dots{
          position:absolute;
          bottom:10px;
          left:50%;
          transform:translateX(-50%);
        }
      .dots li{
        display:inline-block;
        width:15px;
        height:15px;
        margin:0 3px;
        border:1px solid white;
        border-radius:50%;
        background-color:#333;
        cursor:pointer;
      }
      .dots .dotted{
        background-color:orange;
      }
      #app{
        height:400px;
      }
      el-main{
        display: flex;
        justify-content: space-around;
        padding:60px;
      }
      
     @font-face {
  font-family: 'iconfont';  /* Project id 2563202 */
  src: url('//at.alicdn.com/t/font_2563202_ofwtdm5dp4f.woff2?t=1621584751865') format('woff2'),
       url('//at.alicdn.com/t/font_2563202_ofwtdm5dp4f.woff?t=1621584751865') format('woff'),
       url('//at.alicdn.com/t/font_2563202_ofwtdm5dp4f.ttf?t=1621584751865') format('truetype');
}
  .iconfont{
    font-family:"iconfont" !important;
    font-size:30px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 1px;
    -moz-osx-font-smoothing: grayscale;}
</style>